<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: #00f;
            display: none;
        }
        .on{
            background: #f00;
        }
        .on1{
            display: block;
        }
    </style>
    <script>
        window.onload=function(){
            var aInp=document.getElementsByTagName('input');
            var aDiv=document.getElementsByTagName('div');
            for(var i=0;i<aInp.length;i++){
                aInp[i].index=i;
                aInp[i].onclick=function(){
                    for(var i=0;i<aInp.length;i++){
                        aInp[i].className='';
                        aDiv[i].className='';
                    }
                    this.className='on';
                    aDiv[this.index].className='on1';
                }
            }
        }
    </script>
</head>
<body>
<input class='on' type="button" value="aaa"/>
<input type="button" value="bbb"/>
<input type="button" value="ccc"/>

<div class="on1">111</div>
<div>222</div>
<div>333</div>
</body>
</html>